import React, { PureComponent } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Form, Divider, Card, Select, Modal } from 'antd';
import DescriptionList from '../../components/DescriptionList';
import globalConstant from '../../utils/globalConstant';


const { Description } = DescriptionList;


@connect(({ userBroad, general, loading }) => ({
  userBroad,
  general,
  loading: loading.models.userBroad,
}))
@Form.create()
export default class ShowUserInfo extends PureComponent {
  state={
  }
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'userBroad/getUserBroadDetail',
      payload: {
        id: this.props.data,
      },
    });
    dispatch({
      type: 'general/getNetworkUseStatus',
      payload: {
        dictGroupCode: 'NETWORK_USE_STATUS',
      },
    });
  }
  handleChange =(value) => {
    Modal.confirm({
      title: '状态修改',
      content: (
        <div>
          <p>确定修改状态?</p>
        </div>
      ),
      onOk: () => {
        this.props.dispatch({
          type: 'userBroad/updateAccountStatus',
          payload: {
            id: this.props.data,
            networkUseStatus: value,
          },
          callback: () => {
            this.props.dispatch({
              type: 'userBroad/getUserBroadDetail',
              payload: {
                id: this.props.data,
              },
            });
            this.props.refreshList();
          },
        });
      },
    });
  }
  networkUseStatusOptions =() => {
    const { general: { networkUseStatusList } } = this.props;

    return networkUseStatusList && networkUseStatusList.map((item, index) => {
      return (
        <Select.Option
          key={index.toString()}
          value={item.dictItemCode}
        >{item.dictItemName}
        </Select.Option>
      );
    });
  }
  render() {
    const { userBroadInfo } = this.props.userBroad;
    return (
      <Card bordered={false} loading={this.props.loading}>
        <DescriptionList size="large" title="套餐信息" style={{ marginBottom: 32 }} col={2}>
          <Description term="套餐名称">{userBroadInfo.packageName}</Description>
          <Description term="套餐时长">{userBroadInfo.diffTime}</Description>
          <Description term="宽带带宽">{userBroadInfo.speed}</Description>
          <Description term="生效时间">{moment(userBroadInfo.effectiveTime).format(globalConstant.dateFormat)}</Description>
          <Description term="到期时间">{moment(userBroadInfo.invalidTime).format(globalConstant.dateFormat)}</Description>
          <Description term="状态">
            <Select
              ref="mySelect"
              value={userBroadInfo.networkUseStatus}
              style={{ width: 120 }}
              onChange={this.handleChange}
            >{
              this.networkUseStatusOptions()
            }
            </Select>
          </Description>
        </DescriptionList>
        <Divider style={{ marginBottom: 32 }} />
        <DescriptionList size="large" title="宽带业务信息" style={{ marginBottom: 32 }} col={2}>
          <Description term="运营商类型">{userBroadInfo.bussinessName}</Description>
          <Description term="下行网速">{userBroadInfo.netSpeeds}</Description>
          <Description term="所属城市">{userBroadInfo.city}</Description>
        </DescriptionList>
        <DescriptionList size="large" title="用户信息" style={{ marginBottom: 32 }} col={2}>
          <Description term="用户姓名">{userBroadInfo.userName}</Description>
          <Description term="注册来源">{userBroadInfo.regSource}</Description>
          <Description term="联系电话">{userBroadInfo.userMobile}</Description>
          <Description term="联系地址">{userBroadInfo.address}</Description>
          <Description term="邮箱">{userBroadInfo.userEmail}</Description>
        </DescriptionList>
      </Card>
    );
  }
}
